<template>
  <div class="right-panel">
    <div class="panel-section">
      <div class="section-title">随机点生成（北京范围）</div>
      <div class="btn-row">
        <button class="btn" @click="emitGenerate(15)">生成15个</button>
        <button class="btn" @click="emitGenerate(25)">生成25个</button>
        <button class="btn" @click="emitGenerate(50)">生成50个</button>
      </div>
    </div>
    <div class="panel-section">
      <div class="section-title">智能排序</div>
      <div class="btn-row">
        <button class="btn primary" :disabled="!canSort || loading" @click="emitSmartSort">{{ loading ? '排序中...' : '智能排序' }}</button>
      </div>
      <div class="hint">起点固定为天安门（地图默认中心点）</div>
    </div>

    <div class="panel-section" v-if="points && points.length">
      <div class="section-title">点列表（稳定名称）</div>
      <div class="list">
        <div class="row" v-for="p in points" :key="p.id">
          <span class="name">{{ p.name }}</span>
          <span class="coord">({{ p.lat }}, {{ p.lng }})</span>
        </div>
      </div>
    </div>

    <div class="panel-section" v-if="original && original.length">
      <div class="section-title">优化前顺序</div>
      <ol class="order">
        <li v-for="id in original" :key="'orig-' + id">{{ nameById(id) }}</li>
      </ol>
    </div>

    <div class="panel-section" v-if="optimized && optimized.length">
      <div class="section-title">优化后顺序</div>
      <ol class="order">
        <li v-for="id in optimized" :key="'opt-' + id">{{ nameById(id) }}</li>
      </ol>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const emit = defineEmits(['generatePoints', 'smartSort'])

// 是否可以进行排序（需要已有点）
const props = defineProps({
  pointsCount: { type: Number, default: 0 },
  points: { type: Array, default: () => [] },
  original: { type: Array, default: () => [] },
  optimized: { type: Array, default: () => [] },
})

const canSort = computed(() => props.pointsCount > 0)

// 触发生成随机点事件
const emitGenerate = (count) => {
  emit('generatePoints', count)
}

// 触发智能排序事件
const emitSmartSort = () => { emit('smartSort') }
const loading = defineModel('loading', { type: Boolean, default: false })

// 根据 id 找名称
const nameById = (id) => {
  const p = props.points.find(x => x.id === id)
  return p ? p.name || `点${id}` : `点${id}`
}
</script>

<style scoped>
.right-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 32px;
  width: 260px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
  z-index: 1001;
  padding: 12px;
  overflow: auto;
}

.panel-section { margin-bottom: 16px; }
.section-title { font-weight: 600; margin-bottom: 8px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #fff;
  cursor: pointer;
}
.btn:hover { background: #f5f7fa; }
.btn.primary { background: #409eff; color: #fff; border-color: #409eff; }
.btn.primary:disabled { background: #a0cfff; cursor: not-allowed; }
.hint { color: #909399; font-size: 12px; margin-top: 8px; }
.list { max-height: 160px; overflow: auto; border: 1px solid #ebeef5; border-radius: 4px; padding: 6px; }
.row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.name { color: #303133; }
.coord { color: #909399; }
.order { padding-left: 18px; max-height: 180px; overflow: auto; }
</style>


